<template>
	<view class="contentbox">
		<base-search class="search"></base-search>
		<view class="body">
			<scroll-view style="height: 2000upx;" scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower">
			<view class="cu-card case">
				<view class="cu-item shadow">
					<view class="image">
						<image src="../../static/home.jpg"
						 mode="widthFix"></image>
						 <view class="title">本站共有<text class="small">{{numberobj.qunNum}}</text>个 VIP群 ，{{numberobj.userNum}}个群成员</view>
						<view class="cu-bar bg-shadeBottom">
							<text class="text-cut" @click="aLink">{{payAmount}}元成为终身会员，享受5大特权 ></text>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-list menu-avatar">
				<view class="cu-item" v-for="(item,index) in tableData" :style="[{animation: 'show ' + ((index+1)*0.1+1) + 's 1'}]">
					<view class="cu-avatar radius lg" :style="{'background-image':'url('+ item.picUrl +')'}"></view>
					<view class="content">
						<view class="text-grey">{{item.title}}</view>
						<view class="text-gray text-sm flex">
							<view class="text-cut">{{item.details}}</view> 
						</view>
					</view>
					<view class="action">
						<view class='cu-tag round' :class="{'line-red':item.fullStatus,'line-green':!item.fullStatus}" @click="jumpCode(item)">{{item.fullStatus == 1 ? '已满' : '入群'}}</view>
					</view>
				</view>
			</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { qunListApi,userNumCountApi } from '@/common/requestjs/goods_api.js'
import BaseSearch from '../seach/seach.vue'
export default {
	components: {
		BaseSearch,
	},
	data() {
		return {
			tableData:[],
			num:5,
			payAmount:'9.9',
			numberobj: {
				qunNum:'',
				userNum:''
			}
		}
	},
	onReachBottom() {
		
	},
	created() {
		this.getNumberData()
		this.getData()
	},
	methods: {
		getNumberData(){
			this.$API.userNumCountApi('wx7fa156568cfba901').then((res) => {
				this.numberobj = res.data
			})
		},
		jumpCode (item) {
			if(!item.fullStatus){
				this.$emit('jumpCode',item)
			}
		},
		scrolltolower() {
			this.num += 5
			this.getData()
		},
		getData () {
			this.$API.qunListApi('wx7fa156568cfba901').then((res) => {
				this.tableData = res.data
			})
		},
		aLink () {
			var appid = 'wx7fa156568cfba901'//$("#appid").val();
			var rootUrl = "https://xinci.tech";
			var param = "?totalFee="+this.payAmount+"&appId="+appid;
			var wUrl = "/bqb/pay";
			var redirect_url = rootUrl + wUrl + param;
			var wxUrl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx7fa156568cfba901&redirect_uri="+encodeURIComponent(redirect_url)+"&response_type=code&scope=snsapi_base#wechat_redirect";
			window.location.href=wxUrl;
			// uni.navigateTo({
			// 	url: '/pages/webview/webview?url='+wxUrl
			// })
		}
	}
}
</script>

<style lang="scss" scoped>
.cu-list.menu-avatar>.cu-item:last-child::after{
	border: none;
}
.contentbox{
	padding-top: constant(safe-area-inset-top);
	padding-top: env(safe-area-inset-top);
}
.search{
	position: fixed;
	top: 0px;
	width: 100%;
	z-index: 1;
}
.body{
	padding-top: 95rpx;
	padding-bottom: 95rpx;
	
}
.lg{
	width: 150rpx;
	height: 150rpx;
}
.text-grey{
	font-weight: 700;
	color: #333333;
}
.cu-list.menu-avatar>.cu-item .content>uni-view:first-child{
	font-size: 35rpx;
}
.cu-list.menu-avatar>.cu-item{
	height: 200rpx;
}
.cu-list.menu-avatar>.cu-item>.cu-avatar{
	left:10rpx;
}
.cu-list.menu-avatar>.cu-item .content{
	left: 170rpx;
}
.cu-list.menu-avatar>.cu-item .flex .text-cut{
	letter-spacing: 0;
	overflow: hidden;
	display: -webkit-box;
	text-overflow: ellipsis;
	white-space: normal;
	-webkit-line-clamp: 2;  /*要显示的行数*/
	-webkit-box-orient: vertical;
	font-size:29rpx;
	color: #7e7e7e;
}
.cu-card.case .image .cu-bar{
	display: flex;
	justify-content: center;
}
.cu-card.case .image .cu-bar .text-cut{
	font-size: 32rpx;
	font-weight: bold;
	color: #5dc09b;
	height: 130rpx;
	line-height: 130rpx;
}
.cu-card.case .image .title{
	display: flex;
	justify-content: center;
	align-items: flex-end;
	width: 100%;
	font-size: rpx;
	color: #FFFFFF;
	font-weight: bold;
	position: absolute;
	top: 50rpx;
}
.cu-card.case .image .title .small{
	font-size: 40rpx;
	color: #fcc709;
}
.cu-card.case .image uni-image img{
	border-radius: 50rpx;
}
.cu-list.menu-avatar>.cu-item .action{
	width: 130rpx;
}
.cu-tag{
	font-size: 30rpx;
	height: 50rpx;
	padding: 0rpx 25rpx;
	border-width: 2rpx;
}
.text-gray, .line-gray, .lines-gray{
	margin-right: 20rpx;
}
</style>
